<template>
  <div>
    <div class="text-center">
      <img
        class="mt-40 logo"
        src="../assets/img/logo@3x.png"
        alt=""
        srcset=""
      />
      <h1 class="fs-40 mt-40">{{ userInfo.username }}</h1>
    </div>
    <div class="p-40">
      <van-cell title="我的岗位" is-link to="/join" />
      <van-cell title="我的收藏" is-link v-for="item in 5" />
    </div>
    <div class="p-40">
      <van-button type="danger" block @click="handleLogout">退出</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    handleLogout() {
      //清除用户信息
      this.$store.commit("user/initUserInfoMut", null);
      // 跳到首页
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="scss" scoped>
.logo {
  width: 20rem;
  height: 20rem;
}
</style>
